<template>
  <!-- 指令示例 -->
  <div class="d-demo">
    <!-- 逻辑控制: if else -->
    <p v-if="isShow">显示</p>
    <p v-else>隐藏</p>



    <!-- 逻辑控制: if elseif else -->
    <p v-if="type === 1">type 为 1</p>
    <p v-else-if="type === 2">type 为 2</p>
    <p v-else>type 为除1和2外的其他值</p>




    <!-- 列表渲染 -->
    <ul>
      <li v-for="item in list" :key="item">当前元素为：{{ item }}</li>
    </ul>



    <!-- v-model -->
    <p>
      <input type="text" v-model="value" />
      <span>你当前输入的值为： {{ value }}</span>
    </p>

    <!-- 原生事件 -->
    <p>
      <button v-on:click.prevent="onClickHandler">点击一下</button>
      <button @click.prevent="onClickHandler">点击一下</button>
    </p>

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="onClickHandler"></a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    <!-- v-once -->
    <p>
      <span>当前计数：{{ count }}</span>
      <span v-once>这个计数不会变化： {{ count }}</span>
      <button @click.prevent="count++">+1</button>
      <button @click.prevent="count--">-1</button>
    </p>

    <!-- 过滤器 -->
    <p>
      {{ 'hello' | up }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      value: '',
      isShow: true,
      type: 1, // 1 2 3
      list: ['a', 'b', 'c', 'd'],
    };
  },
  filters: {
    up: function(value) {
      if (!value) {
        return '';
      }

      return (value + '').toUpperCase();
    }
  },
  methods: {
    onClickHandler() {
      console.log('哎呦，被点了一下');
    },
  },
}
</script>

<style>
.d-demo p {
  margin: 20px;
}
</style>